<template>
    <div>
<el-table
    :data="getSpecs"
    border
    style="width: 100%">
    <el-table-column
      prop="id"
      label="规格编号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="specsname"
      label="规格名称"
      width="180">
    </el-table-column>
   <el-table-column

      label="规格属性"
      width="180">
            <template slot-scope="item">
          <div>
            <p v-for="attr in item.row.attrs" :key="attr">{{attr}}</p>
          </div>
        </template>
    </el-table-column>
   <el-table-column

      label="状态">
 <el-button plain size="mini" type="success">启用</el-button>

    </el-table-column>
        <el-table-column
      label="操作">
      <template slot-scope="item">
          <div>
          <el-button plain  size="mini"  type="primary"    @click="edit(item.row.id)">编辑</el-button>
 <el-button plain size="mini" type="danger"    @click="del(item.row.id)">删除</el-button>
          </div>
        </template>

    </el-table-column>

  </el-table>
  <el-pagination
      :page-size="getSize"

  background
  layout="prev, pager, next"
  :total="getCount"
   @current-change="changePgae"

  >
</el-pagination>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { specsdelete } from '../../../api/api'

export default {
  data () {
    return {

    }
  },

  mounted () {
    this.getUsercount()

    this.getSpecslist()
    console.log(this.getSpecs)
  },
  computed: {
    ...mapGetters('sku', ['getSpecs', 'getSize', 'getCount'])
  },
  methods: {
    ...mapActions('sku', ['getSpecslist', 'changePageAction', 'getUsercount']),

    // 封装一个切换页码并获取当前页码的事件
    changePgae (n) {
      this.$store.dispatch('sku/changePageAction', n)
    },

    del (id) {
      console.log(id)
      this.$confirm('你确定要删除这条数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        specsdelete({ id }).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.getSpecslist()
            this.getUsercount()
            // this.changePageAction()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    edit (id) {
      console.log(id)
      this.$emit('edit', id)
    }
  }

}
</script>

<style>

</style>
